<template>
	<div class=".bg">
		<div class="banner"  @click="toupiao">
			<image :src="poster" mode="widthFix"></image>
		</div>
		<div class="user">
			<div class="name" @click="showTree = false">
				<label>投票人员：</label>
				<div class="namespace" v-text="toupiao_user || '请选择姓名'"></div>
			</div>
		</div>
		<div class="treeBox" v-if="showTree">
			<div class="treeContent">
				<div class="step1">
					<u-subsection :list="list" :current="current" @change="sectionChange" fontSize="14" activeColor="#d9232f"></u-subsection>
				</div>
				<div class="nameBox" v-if="current == 0">
					<div class="bm_list">
						<div class="bm_list_con">
							<div class="bm_tlt">姓名</div>
							<ul>
								<li v-for="(name,i) in user_jingli" :key="i" :class="nameIndex == i ? 'active' : ''" @click="nameIndex = i">{{name.name}}</li>
							</ul>
						</div>
					</div>
					
				</div>
				<div class="nameBox" v-if="current == 1">
					<div class="bm_list">
						<div class="bm_list_con">
							<div class="bm_tlt">姓名</div>
							<ul>
								<li v-for="(name,i) in user_shenyang"  :key="i" :class="nameIndex == i ? 'active' : ''" @click="nameIndex = i">{{name.name}}</li>
							</ul>
						</div>
					</div>
					
				</div>
				<div class="nameBox" v-if="current == 2">
					<div class="bm_list">
						<div class="bm_list_con">
							<div class="bm_tlt">主管部门</div>
							<ul>
								<li v-for="(bm2,i) in bm2_heb" :key="i" :class="bm2Index == i ? 'active' : ''" @click="changeBm2(bm2,i)">{{bm2}}</li>
							</ul>
						</div>
						<div class="bm_list_con">
							<div class="bm_tlt">组别</div>
							<ul>
								<li v-for="(bm3,i) in bm3_heb[bm2Index]" :key="i" :class="bm3Index == i ? 'active' : ''" @click="changeBm3(bm3,i)">{{bm3}}</li>
							</ul>
						</div>
						<div class="bm_list_con">
							<div class="bm_tlt">姓名</div>
							<ul>
								<li v-for="(name,i) in user_heb" :key="i" :class="nameIndex == i ? 'active' : ''" @click="nameIndex = i">{{name.name}}</li>
							</ul>
						</div>
					</div>
				</div>
				<div class="nameBox" v-if="current == 3">
					<div class="bm_list">
						<div class="bm_list_con">
							<div class="bm_tlt">姓名</div>
							<ul>
								<li v-for="(name,i) in user_qita" :key="i" :class="nameIndex == i ? 'active' : ''" @click="nameIndex = i">{{name.name}}</li>
							</ul>
						</div>
					</div>
				</div>
				<div class="confirmBox">
					<u-button type="primary" block @click="checkUser()" color="#d9232f">确认选择</u-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		mapActions
	} from 'vuex';
	const db = wx.cloud.database()
	export default {
		data() {
			return {
				poster: "https://www.baixuemianshi.com/zhuanti/images/nianhui/poster.jpg?" + new Date(),
				banner:"https://www.baixuemianshi.com/zhuanti/images/nianhui/banner.jpg?" + new Date(),
				info:"",
				userList:[],
				showTree: false,
				alluser: [],
				user_jingli: [],
				user_shenyang: [],
				
				bm2_heb: [],
				bm3_heb: [],
				user_heb: [],
				user_qita: [],
				toupiao_user:"",
				list: ["经理入口","沈阳入口","哈尔滨入口",'其他入口'],
				current: 0,
				bm2Index: 0,
				bm3Index: 0,
				selectBm2: "",
				selectBm3: "",
				nameIndex: 0,
				qdNum: 0,
				outTime: false,
				showConfirm:false,
			}
		},
		onShareAppMessage(res) {},
		onLoad(options) {
			
		},
		computed: {
			userphone() {
				return this.$store.getters.userphone ? this.$store.getters.userphone : '';
			}
		},
		created() {
			let that = this;
			let tu = wx.getStorageSync("tpUser");
			if(tu){
				that.toupiao_user = tu
				that.showTree = false
			}
			that.getUserList()
			that.getInfo()
		},
		mounted() {
			let that = this 
			
		},
		watch: {
			
		},
		methods: {
			...mapActions(['LogSetPhone']),
			getUserList(){
				let that = this
				uni.request({
					url: "https://www.baixuemianshi.com/zhuanti/images/nianhui/userList.js",
					method: 'get',
					dataType: 'text',
					data: {
						sstimes: new Date()
					},
					success: function(res) {
						var resjson = JSON.parse(res.data);
						that.alluser = resjson
						that.filterUser()
					}
				});
			},
			filterUser(){
				let that = this
				let u = that.alluser
				let jl = u.filter(item => item.bm1 == "经理")
				let sy = u.filter(item => item.bm1 == "沈阳分校")
				let heb = u.filter(item => item.bm1 == "哈尔滨总校")
				let qita = u.filter(item => item.bm1 == "其他入口")
				that.user_jingli = jl
				that.user_shenyang = sy
				that.user_qita = qita
				console.log(that.user_qita,'其他')
				let h = heb.map(item => item.bm2)
				h = [...new Set(h)]
				that.bm2_heb = h
				
				h.map((e,i) => {
					let b2 = heb.filter(item => item.bm2 == e)
					let bmname = b2.map(item => item.bm3)
					bmname = [...new Set(bmname)]
					that.bm3_heb[i] = bmname
				})
				
				that.filterBm2()
			},
			sectionChange(index){
				this.current = index;
				this.nameIndex = 0
			},
			changeBm2(item,i){
				let that = this
				that.bm2Index = i
				that.bm3Index = 0
				that.nameIndex = 0
				that.filterBm2()
			},
			changeBm3(item,i){
				let that = this
				that.bm3Index = i
				that.nameIndex = 0
				that.filterBm3()
			},
			filterBm2(){
				let that = this
				that.selectBm2 = that.bm2_heb[that.bm2Index]
				that.filterBm3()
			},
			filterBm3(){
				let that = this
				that.selectBm3 = that.bm3_heb[that.bm2Index][that.bm3Index]
				that.user_heb = that.alluser.filter(item => item.bm1 == "哈尔滨总校" && item.bm2 == that.selectBm2 && item.bm3 == that.selectBm3)
			},
			checkUser(){
				let that = this
				if(that.current == 0){
					that.toupiao_user = that.user_jingli[that.nameIndex].name
					
				}else if(that.current == 1){
					that.toupiao_user = that.user_shenyang[that.nameIndex].name
				}else if(that.current == 2){
					that.toupiao_user = that.user_heb[that.nameIndex].name
				}else{
					that.toupiao_user = that.user_qita[that.nameIndex].name
				}
				that.showTree = false
				wx.setStorageSync('tpUser', that.toupiao_user)
			},
			getInfo(){
				let that = this
				uni.request({
					url: "https://www.baixuemianshi.com/zhuanti/images/nianhui/nianhui.js",
					method: 'get',
					dataType: 'text',
					data: {
						sstimes: new Date()
					},
					success: function(res) {
						var resjson = JSON.parse(res.data);
						that.info = resjson
					}
				});
			},
			toupiao(page){
				uni.showToast({
					title:"投票已结束",
					icon:"error"
				})
				return
				
			}
		},
		components: {

		}
	};
</script>

<style>
	@import url(./index.css);
</style>